<template>
  <div class="contract-detail-container">
    <el-page-header @back="goBack" content="合同详情" />
    <el-card class="box-card">
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>
      <div v-if="!loading && contract">
        <el-descriptions title="合同基础信息" :column="2" border>
          <el-descriptions-item label="合同编号">{{ contract.contractNumber }}</el-descriptions-item>
          <el-descriptions-item label="合同名称">{{ contract.contractName }}</el-descriptions-item>
          <el-descriptions-item label="合同状态">
            <el-tag :type="getStatusType(contract.status)">{{ contract.status }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="合同类型">{{ contract.contractType }}</el-descriptions-item>
          <el-descriptions-item label="合同金额">{{ contract.contractAmount }} 元</el-descriptions-item>
          <el-descriptions-item label="支付周期">{{ contract.paymentCycle }}</el-descriptions-item>
          <el-descriptions-item label="签约日期">{{ contract.signDate }}</el-descriptions-item>
          <el-descriptions-item label="生效日期">{{ contract.startDate }} - {{ contract.endDate }}</el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <el-descriptions title="合同双方信息" :column="2" border>
          <el-descriptions-item label="甲方">{{ contract.partyA }}</el-descriptions-item>
          <el-descriptions-item label="乙方">{{ contract.partyB }}</el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <div class="attachment-section">
            <h3>合同附件</h3>
            <div v-if="contract.attachments && contract.attachments.length > 0">
                <el-link 
                    v-for="(file, index) in contract.attachments" 
                    :key="index" 
                    :href="file.url" 
                    type="primary" 
                    target="_blank"
                    style="margin-right: 15px;"
                >
                    {{ file.name }}
                </el-link>
            </div>
            <div v-else>
                <el-text type="info">暂无附件</el-text>
            </div>
        </div>

      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getContractDetail } from '@/api/finance'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const contract = ref(null)
const loading = ref(true)

const contractId = route.params.id

const fetchContractDetail = async () => {
  try {
    loading.value = true
    const res = await getContractDetail(contractId)
    if (res.data.code === 200) {
        contract.value = res.data.data
    } else {
        ElMessage.error(res.data.message || '获取合同详情失败')
    }
  } catch (error) {
    ElMessage.error('获取合同详情失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const getStatusType = (status) => {
  switch (status) {
    case '生效中': return 'success';
    case '待审核': return 'warning';
    case '已到期': return 'info';
    case '已驳回':
    case '已终止':
    case '作废':
      return 'danger';
    default: return '';
  }
}

const goBack = () => {
  router.back()
}

onMounted(() => {
  fetchContractDetail()
})
</script>

<style scoped>
.contract-detail-container {
  padding: 20px;
}
.box-card {
  margin-top: 20px;
}
.loading-container {
    padding: 20px;
}
.attachment-section {
    margin-top: 20px;
}
</style> 